<template>
	<div v-show="contentFlag" class="containerAll me-listAddress">
		<div v-show="!nocontentFlag" id="mescroll" class="mescroll">
	        <div>
				<div v-for="(item, index) in info" :key='index' class='item' :class='[index>0?"marginT":""]'>
					<div slot="content" class="demo-content vux-1px-t ">
						<p class="contentPFir">
							<span>{{item.consignee}}</span>
							<span class="contentPhone">{{item.phone}}</span>
						</p>
						<p class="contentPSec">{{item.provinceName}}{{item.cityName}}{{item.areaName}}{{item.townName}}{{item.address}}</p>
						<div class="setdafault flex">
							<div @click="setDefault(item,index)">
								<div class="outP" :class="[item.state == 'ISDEFAULT'?'borderActive':'borderGray']">
									<p class="innerP" v-if="item.state=='ISDEFAULT'"></p>
								</div>
								<p class="default">设为默认</p>
							</div>
							<div class="edit" @click="edit(item)">
								<img class="editImg" src="https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/compile-icon.png"/>
								<span>编辑</span>
							</div>
							<div class="delete" @click="deleteItem(item,index)">
								<img class="deleteImg" src="../../assets/imgs/del.png"/>
								<span>删除</span>
							</div>
						</div>
					</div>
				</div>
			</div>
    	</div>
    	<div v-show="nocontentFlag">
			<div class="order" @click="addAddress">
				<img class="left" src="https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/address-icon.png"/>
				<span class="word">收货地址</span>
				<img class="right" src="https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/cor_right.png"/>
			</div>
			<div class='not_tips flex-c flex-item-v-center'>
		      <img :class="iserror ? 'errororder':'noorder' " :src="iserror ? 'https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/error.png':'https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/ic_empty.png'" />
		      <span>{{ iserror ? '网络错误，下拉刷新试试':'当前没有地址'}}</span>
		    </div>
		</div>
    	<modal v-show='modalFlag' v-on:cancel='cancelClick' v-on:sure='sureClick'>
    		<p slot='title' class="modalTitle">花伴商城</p>
    		<p slot='info' class="modalInfo">确定要删除地址吗?</p>
    	</modal>
		<div class="addAdress" @click="addAddress">
			新增收货地址
		</div>
	</div>
	
</template>

<script>
	import { Swipeout, SwipeoutItem, SwipeoutButton } from 'vux'
	import Modal from '@/components/huabanShop/modal' 
	import MeScroll from 'mescroll'
	import http from '@/util/http'
	import Api from '@/util/api'
	import utils from '@/util/util'
	
	export default {
		data() {
			return {
				mescroll: null,
				info: [],
				num: 0,
				modalFlag: false,
				id:'',
				stateIndex: 0,
				iserror: false,
				nocontentFlag: true,
				contentFlag: false,
				index: 0,
				pageNum: 1,
				dataLength: 0
			}
		}
		,created: function () {
			this.$vux.loading.show({
			 text: 'Loading'
			})
			http.post(Api.listUserAddress,{numPerPage: 7, order: "desc", pageNum: 1, type: "N",userId:utils.getUserInfo().user.id}).then(res => {
				this.$vux.loading.hide()
				if (res.code == 200) {
					this.dataLength = res.data.total;
					this.contentFlag = true;
					if(this.dataLength > 0) {
						this.nocontentFlag = false;
					}
				}else {
					this.toast(res.message)
				}
			})
		}
		,components: {
			Swipeout,
			SwipeoutItem,
			SwipeoutButton,
			Modal
		}
		,mounted: function() {
				var self = this;
				self.mescroll = new MeScroll("mescroll", { 
					down: {
						callback: self.downCallback //下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
					},
					up: {
						callback: self.upCallback , //上拉加载的回调
						isBounce: true //如果您的项目是在iOS的微信,QQ,Safari等浏览器访问的,建议配置此项.解析(必读)
						,offset: 50
					}
				});
		}
		,methods: {
			setDefault(item,index){
				this.$vux.loading.show({
				 text: '修改中'
				})
				if (this.info.length == 1) {
					item.state = 'ISDEFAULT';
					this.$vux.loading.hide();
					return;
				}
				http.post(Api.updateAddressState,{'userAddressId': item.id}).then(res => {
					this.$vux.loading.hide();
					if (res.code == 200) {
						item.state = 'ISDEFAULT';
						this.info[this.stateIndex].state = 'ISDEF'
						this.stateIndex = index
					}else {
						this.toast(res.message)
					}
				})
			}
			,edit(item) {
				this.$router.push("/add-address?name="+item.consignee+'&phone='+item.phone+'&pro='+item.provinceName+'&city='+item.cityName+'&county='+item.areaName+'&town='+item.townName+'&state='+item.state+'&detail='+item.address+'&adressId='+item.id+'&regionCode='+item.regionCode);
			}
			,deleteItem(item,index) {
				this.id = item.id;
				this.index = index;
				this.modalFlag = true;
			}
			,addAddress () {
		 		this.$router.push("/add-address");
		 	}
			,downCallback () {
				http.post(Api.listUserAddress,{numPerPage: 7, order: "desc", pageNum: 1,  type: "N",userId:utils.getUserInfo().user.id}).then(res => {
					if (res.code == 200) {
						this.pageNum=1;
						let self = this;
						
						this.info = res.data.rows;
						this.mescroll.endDownScroll(false);
						if(this.info.length == res.data.total) {
							this.mescroll.endUpScroll(true);
							setTimeout(function() {
								self.mescroll.lockUpScroll();
							}, 500)

							return;
						}
						this.mescroll.endUpScroll(false);
						this.mescroll.lockUpScroll(false);
//						this.info = res.data.rows;
//						this.mescroll.endDownScroll();
//						this.mescroll.lockUpScroll(false);
					}else{
						this.toast(res.message)
					}
				})
			}
			,upCallback (page) {
				this.pageNum++;
				http.post(Api.listUserAddress,{numPerPage: 7, order: "desc", pageNum: this.pageNum, type: "N",userId:utils.getUserInfo().user.id}).then(res => {
					console.log(res);
					if (res.code == 200) {
						this.info = [...this.info, ...res.data.rows];
						this.mescroll.endUpScroll(false)
						if(this.info.length == res.data.total) {
							this.mescroll.endUpScroll(true);
							this.mescroll.lockUpScroll();
						}
//						this.mescroll.endUpScroll(false)
//						for (let i = 0; i < res.data.rows.length; i++) {
//							this.info.push(res.data.rows[i]);
//							if (this.info.length == res.data.total) {
//								this.mescroll.lockUpScroll();
//								this.toast('数据加载完成');
//							}
//						}
					}else{
						this.toast(res.message)
					}
				})
			}
			,cancelClick() {
				this.modalFlag=false;
			}
			,sureClick (index) {
				http.post(Api.userDeleteUserAddress,{
					"id":this.id,userId:utils.getUserInfo().user.id
				}).then(res => {
					if (res.code == 200) {
						this.modalFlag=false;
						this.info.splice(this.index, 1);
						if (this.info.length == 0) {
							this.nocontentFlag=true;
							this.toast(res.message);
							return;
						}
						this.info[0].state = 'ISDEFAULT';
						this.toast(res.message);
						
					} else{
						this.toast(res.message)
					}
				})
			}
			,addAddress () {
		 		this.$router.push("/add-address");
		 	}
		}
		,computed:{
			
		}
		,filters: {
			isDefault (value) {
			}
		}
	}
</script>

<style lang="less" rel="stylesheet/less">
@import '../../assets/css/mescroll.min.css';
		.marginT{
			margin-top: .18rem;
		}
		.order{
				height: 1.22rem;
				line-height: 1.22rem;
				position: relative;
				background: #FFFFFF;
				.left{
					width: .5rem;
					height: .5rem;
					position: absolute;
					left: .3rem;
					top: .36rem;
				}
				.word{
					margin-left: .98rem;
					font-size: .32rem;
					color: #464646;
				}
				.right{
					position: absolute;
					width: .4rem;
					height: .4rem;
					right: .2rem;
					top: .41rem;
				}
			}
		.not_tips {
		  width: 100%;
		  display: flex;
		  position: relative;
		  span {
			  padding: .2rem 0;
			  font-size: .2rem;
			  color: #909090;
			}
		}
		.noorder {
		  width: 2.05rem;
		  height: 2.05rem;
		  margin-top: 30%;
		}
		
		.errororder {
		  width: 2.05rem;
		  height: 2.05rem;
		  margin-top: 30%;
		}
		
		.modalTitle{
			color: #464646;
			font-size: .32rem;
			font-weight: 500;
			text-align: center;
			height: .78rem;
			line-height: .78rem;
			padding-top: .23rem;
		}	
		.modalInfo{
			color: #909090;
			font-size: .28rem;
			text-align: center;
			height: .74rem;
			line-height: .74rem;
			padding-bottom: .52rem;
		}
		
		.me-listAddress{
			background: #F2F2F2;
			height: 100%;
			width: 100%;
			position: absolute;
			bottom: 0rem;
			.mescroll-upwarp {
				padding-bottom: 1rem;
			}
			.mescroll{
				height: 100%;
				overflow: auto;
				.item{
					padding: .2rem .3rem 0 .3rem;
					background: #FFFFFF;
					min-height: 2.05rem;
					position: relative;
					.contentPFir{
						height: .4rem;
						line-height: .4rem;
						font-size: .28rem;
						color: #464646;
						.contentPhone{
							margin-left: .36rem;
						}
					}
					.contentPSec{
						margin-top: .1rem;
						width: 6.9rem;
						
						line-height: .33rem;
						color: #909090;
						font-size: .24rem;
						padding-bottom: .3rem;
						border-bottom: 1px solid #f2f2f2;
					}
				}
				.setdafault{
					width: 6.9rem;
					height: .3rem;
					padding: .3rem 0;
					color: #454545;
					font-size: .28rem;
					background: #FFFFFF;
					margin-bottom: 0;
					.borderGray{
						border: 1px solid #BCBCBC;
					}
					.borderActive{
						border: 1px solid #FBC200;
					}
					.outP{
						width: .26rem;
						height: .26rem;
						
						
						border-radius: 50%;
						display: inline-block;
						position: relative;
						top: .03rem;
					}
					.innerP{
						position: absolute;
						top: 0;
						left: 0;
						bottom: 0;
						right: 0;
						margin: auto;
						width: .18rem;
						height: .18rem;
						background: #FBC200;
						border-radius: 50%;
					}
					.default{
						margin-left: .2rem;
						display: inline-block;
						position: relative;
					    top: -.41rem;
					    left: .2rem;
					}
					.edit,.delete{
						display: inline-block;
					}
					.edit{
						margin-left: 2.43rem;
					}
					.delete{
						margin-left: .4rem;
					}
					.editImg{
						width: .3rem;
						height: .3rem;
						position: relative;
						left: -.06rem;
						top: .05rem;
					}
					.deleteImg{
						width: .38rem;
						height: .38rem;
						vertical-align: bottom;
					}
				}
			}
			.addAdress{
				width: 100%;
				height: 1rem;
				line-height: 1rem;
				background: #FBC200;
				position: fixed;
				bottom: 0;
				text-align: center;
				color: #464646;
				font-size: .32rem;
			}
		}
</style>